<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS简易计算器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .jsq{
            width: 400px;
            height: 400px;
            background-color: #ccc;
            margin: 100px;
            border-radius: 5px;
            box-shadow: 8px 8px 8px black;
        }
        h4{
            width: 100%;
            height:40px;
            line-height: 40px;
            text-align: center;
            border-bottom: 1px solid #fff;
            box-shadow: 5px 5px 5px 5px black inset;
            border-radius: 5px;
        }
        #ipt{
            width: 350px;
            height: 30px;
            margin-left: 25px;
            margin-top: 10px;
        }
        .keys{
            width: 350px;
            height: 300px;
            margin: 0 auto;
            border: 1px solid #fff;
            margin-top: 10px;
            padding-top: 25px;
        }
        .keys .buttons{
            float: left;
            width: 42px;
            height: 36px;
            text-align: center;
            background-color: #fff;
            margin: 5px 34px 30px 0;
            font-weight:bold;
            box-shadow: 1px 1px 1px 1px black inset;
            border-radius: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="jsq">
        <h4>JS简单计算器</h4>
        <input type="text" id="ipt">  

        <div class="keys">
        <!-- 第一排 -->
            <button type="button" id="7" onclick="ADD(this.innerText)" value="7" class="buttons">7</button>
            <button type="button" id="8" onclick="ADD(this.innerText)" value="8" class="buttons">8</button>
            <button type="button" id="9" onclick="ADD(this.innerText)" value="9" class="buttons">9</button>
            <button type="button" id="Back" onclick="tuiGe()" value="Back" class="buttons">Back</button>
            <button type="button" id="C" onclick="clearNum()" value="C" class="buttons" style="margin-right:0px;">C</button>
        <!-- 第二排 -->
            <button type="button" id="4" onclick="ADD(this.innerText)" value="4" class="buttons">4</button>
            <button type="button" id="5" onclick="ADD(this.innerText)" value="5" class="buttons">5</button>
            <button type="button" id="6" onclick="ADD(this.innerText)" value="6" class="buttons">6</button>
            <button type="button" id="*" onclick="ADD(this.innerText)" value="*" class="buttons">*</button>
            <button type="button" id="/" onclick="ADD(this.innerText)" value="/" class="buttons" style="margin-right:0px;">/</button>
        <!-- 第三排 -->
            <button type="button" id="1" onclick="ADD(this.innerText)" value="1" class="buttons">1</button>
            <button type="button" id="2" onclick="ADD(this.innerText)" value="2" class="buttons">2</button>
            <button type="button" id="3" onclick="ADD(this.innerText)" value="3" class="buttons">3</button>
            <button type="button" id="+" onclick="ADD(this.innerText)" value="+" class="buttons">+</button>
            <button type="button" id="-" onclick="ADD(this.innerText)" value="-" class="buttons" style="margin-right:0px;">-</button>
        <!-- 第四排 -->
            <button type="button" id="0" onclick="ADD(this.innerText)" value="0" class="buttons">0</button>
            <button type="button" id="00" onclick="ADD(this.innerText)" value="00" class="buttons">00</button>
            <button type="button" id="." onclick="ADD(this.innerText)" value="." class="buttons">.</button>
            <button type="button" id="%" onclick="ADD(this.innerText)" value="%" class="buttons">%</button>
            <button type="button" id="eva" onclick="result()" value="=" class="buttons" style="margin-right:0px;">=</button>
    </div>

    <script text="text/javascript">
            var ipt = document.getElementById('ipt');
            function ADD(a){
                // 获取用户输入的值
                ipt.value += a;
            }
            function result(){
                // 计算用户输入的结果
                ipt.value = eval(ipt.value);
                // eval() 是全局对象的一个函数属性。
                // eval() 的参数是一个字符串。如果字符串表示的是表达式，eval() 会对表达式进行求值。如果参数表示一个或多个 JavaScript 语句，那么eval() 就会执行这些语句。不需要用 eval() 来执行一个算术表达式：因为 JavaScript 可以自动为算术表达式求值。
                // eval()缺点：eval() 是一个危险的函数，它使用与调用者相同的权限执行代码。如果你用 eval() 运行的字符串代码被恶意方（不怀好意的人）修改，您最终可能会在您的网页/扩展程序的权限下，在用户计算机上运行恶意代码。更重要的是，第三方代码可以看到某一个 eval() 被调用时的作用域，这也有可能导致一些不同方式的攻击。相似的 Function 就不容易被攻击。

                // eval() 通常比其他替代方法更慢，因为它必须调用 JS 解释器，而许多其他结构则可被现代 JS 引擎进行优化。
                // 此外，现代 JavaScript 解释器将 JavaScript 转换为机器代码。这意味着任何变量命名的概念都会被删除。因此，任意一个 eval 的使用都会强制浏览器进行冗长的变量名称查找，以确定变量在机器代码中的位置并设置其值。另外，新内容将会通过 eval() 引进给变量，比如更改该变量的类型，因此会强制浏览器重新执行所有已经生成的机器代码以进行补偿。但是（谢天谢地）存在一个非常好的 eval 替代方法：只需使用 window.Function。这有个例子方便你了解如何将eval()的使用转变为Function()。
            }
            function clearNum(){
                //清除计算器显示数据 清零
                ipt.value = '';
            }
            function tuiGe(){
                // 退格 删除
                ipt.value = ipt.value.slice(0,ipt.value.length - 1);
            }
    </script>
</body>
</html>